<template>
  <div class="act">
<!--      <div class="header">          
          <div class="headerArrow" @click="$router.go(-1)">
                <img src="../../assets/image/ticket/arrow.png" alt="" />
          </div> 
          <div class="headerText">
              <p>车网通活动</p>
          </div>          
      </div>
      <div class="blank"></div>-->
      <x-header :left-options="{backText: ''}" class='whiteHeader'>车网通活动</x-header>
      <div class="actInfo" v-if="actData.length != 0" v-for="item in actData">
          <div class="actDate">
              <p>{{item.END_DATE|filterTimes}}</p>
          </div>
          <div class="actImgs" @click.stop='goActivity(item.LINK_URL)'>
              <div class='actImg'>                  
                  <img :src="coverUrl+item.IMG" alt="" />
                  <p class="actSub">{{item.SUBJECT}}</p>
                  <p>立即查看</p>
                  <img src="../../assets/image/mine/right.png" alt="" />
              </div>      
              
          </div>  
      </div>
      <div class="noAct" v-if="actData.length == 0">
          <p>暂无活动...</p>
      </div>
      <div class="blank"></div>
  </div>
</template>
<script>
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"actList",
  // 数据
  data(){

    return{
    	userId:'',//用户id
        phone:'',//用户手机号码
        coverUrl:'',//活动封面url
        actData:'',//所有活动数据
        city:'',//城市
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.phone=getCookie('phone');
    this.city = sessionStorage.getItem('city');//城市
    let oCity = '';
    oCity = this.city == ''?'深圳':this.city;
    //车网通活动
    this.$fetchPost('/ActWeb/getEffectiveAct',{phone:this.phone,CITY:oCity,PAGE_NO:1,PAGE_SIZE:10,POSITION:2}).then(res=>{
            if(res.STATUS_CODE == 1){
            	console.log(res);
                this.coverUrl = res.COVER_URL;
                this.actData = res.RESULT_DATA;               
            }          
            //console.dir(this.actData);
    },err=>console.log(err));
    
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
      //跳转活动
      goActivity(i){      	
          location.href=i;
      }
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
//1px的边框引入
@import url('../../assets/css/public.less');
.vux-header{
		border-bottom:1px solid #fefefe;
	}
.act{
	min-height:100%;
	background:#efeff4;
    .header{
            width:7.5rem;
            height:1rem;            
            position:fixed;            
            top:0;
            display:flex;
            justify-content:space-between;
            align-items:center;
            border-bottom:0.01rem solid #aaaaaa;
            background:#f8f8f8;       
            z-index:999;            
            .headerArrow{
                width:0.5rem;
                height:0.44rem;            
                display:flex;
                flex-flow:column;                    
                img{
                    width:0.44rem;
                    height:0.44rem;
                    margin:0 auto;                              
                }            
            }
            .headerText{
                width:7.5rem;
                height:0.44rem;
                display:flex;
                flex-flow:column;                            
                p{
                    font-size:0.26rem;                    
                }
            }            
    }
    .blank{
        width:100%;
        height:1rem;
        background:#efeff4;
    }
    .noAct{
        p{
            font-size:0.36rem;
            color:#666666;
        }
    }
    .actInfo{
        .actDate{
            width:100%;
            height:1rem;          
            display:flex;
            flex-flow:column;
            justify-content:center;            
            p{
                font-size:0.2rem;
                color:#aaaaaa;
                align-self:center;                
            }
        }
        .actImgs{  
        	width:6.8rem;
        	height:4.8rem;
        	margin:0 auto;        	
        	.borderFu(#aaaaaa,0);
        	display:flex;
        	flex-flow:column;
        	justify-content:center;  
        	border-radius:0.05rem;          	         	
            .actImg{                                                           
                background:#fff;
                display:flex;
                flex-flow:column;    
                justify-content:center;  
                position:relative;                
                img:first-child{
                    width:6.4rem;
                    height:3.26rem;     
                    align-self:center; 
                    margin-top:0.2rem;                    
                }   
                img:last-child{
                	  position:absolute;
                	  bottom:0.2rem;
                	  right:0.2rem;
                    width:0.11rem;
                    height:0.19rem;                                                                
                }              
                p{
                    align-self:center;
                    width:6.8rem;
                    height:0.72rem;
                    font-size:0.26rem;
                    color:#000;
                    text-align:left;
                    line-height:0.69rem;
                    text-indent:0.2rem;                    
                }  
                .actSub{
                	font-size:0.24rem;
                	color:#555;
                	border-bottom:1px solid #efeff4;                	
                }              
            }
            
        }
    }
}
</style>

